<template>
  <view class="page-container">
    <view class="setting-list">
      <!-- 列表项 -->
      <view class="list-item" hover-class="list-item-hover" @click="navigateTo('/pages/my/setting/change-password')">
        <text class="item-label">修改密码</text>
        <uni-icons type="right" size="16" color="#bbb"></uni-icons>
      </view>
    </view>

    <view class="setting-list">
      <view class="list-item">
        <text class="item-label">消息通知</text>
        <!-- switch 开关组件 -->
        <switch :checked="isNotificationOn" @change="onNotificationChange" color="#007aff" style="transform:scale(0.8)" />
      </view>
    </view>

    <view class="setting-list">
      <view class="list-item" hover-class="list-item-hover" @click="checkVersion">
        <text class="item-label">升级版本</text>
        <view class="item-content">
          <text class="content-text">当前版本: {{ currentVersion }}</text>
          <uni-icons type="right" size="16" color="#bbb"></uni-icons>
        </view>
      </view>
      <view class="list-item" hover-class="list-item-hover" @click="navigateTo('about-us')">
        <text class="item-label">关于我们</text>
        <uni-icons type="right" size="16" color="#bbb"></uni-icons>
      </view>
    </view>
    <view class="logout-btn-container">
      <button class="logout-btn" @click="handleLogout">退出登录</button>
    </view>
  </view>
</template>

<script>
import UniIcons from "../../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import {mapState} from 'vuex';
export default {
  name: "my-setting",
  components: {UniIcons},
  computed:{
    ...mapState(['userInfo'])
  },
  data() {
    return {
      isNotificationOn: true,  // 消息通知开关状态
      cacheSize: '12.5MB',       // 缓存大小
      currentVersion: '1.0.2'  // 当前版本号
    };
  },
  methods: {
    // 统一的页面跳转方法
    navigateTo(page) {
      uni.navigateTo({
        url: page
      });
    },
    // 消息通知开关改变
    onNotificationChange(e) {
      this.isNotificationOn = e.detail.value;
      uni.showToast({
        title: this.isNotificationOn ? '已开启消息通知' : '已关闭消息通知',
        icon: 'none'
      });
    },
    // 检查版本更新
    checkVersion() {
      uni.showLoading({
        title: '正在检查更新...'
      });
      // 模拟检查过程
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '已是最新版本',
          icon: 'none'
        });
      }, 1000);
    },
    // 退出登录
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出当前账号吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除Pinia和Vuex中的状态
            uni.removeStorageSync('token');
            this.$store.commit('logout');
            // 2. 提示用户已退出
            uni.showToast({
              title: '已退出登录',
              icon: 'success',
              duration: 1500
            });

            // 3. 延迟后跳转到登录页
            setTimeout(() => {
              uni.reLaunch({
                // 请确保这里的路径是你项目中的登录页面路径
                url: '/pages/login/index'
              });
            }, 1500);
          }
        }
      });
    }
  },
}
</script>

<style scoped>
.page-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.setting-list {
  background-color: #ffffff;
  margin-top: 20rpx;
  border-top: 1rpx solid #eee;
  border-bottom: 1rpx solid #eee;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  font-size: 30rpx;
  color: #333;
  position: relative;
}

/* 列表项之间的分割线 */
.list-item:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  left: 30rpx; /* 左侧留出间距 */
  height: 1rpx;
  background-color: #f0f0f0;
}

.list-item-hover {
  background-color: #f9f9f9;
}

.item-label {
  /* 标签文字样式 */
}

.item-content {
  display: flex;
  align-items: center;
  color: #999;
}
.logout-btn-container {
  margin-top: 60rpx;
  color: #ff5d5d;
}
.logout-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #fa5151; /* 使用警示性的红色 */
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
  border-radius: 24rpx;
  text-align: center;
  border: none;
}
.content-text {
  font-size: 28rpx;
  margin-right: 10rpx;
}
</style>
